<!-- 
框架
    一套架构，具有一套比较完整的网页功能解决方案，有预制样式库、组件、插件。


Bootstrap框架
    网站：
        jquery（bs的【js插件】依赖jq，故jq也需要引入，且在bs之前引入）
        www.bootcss.com

    版本：
        2.x 兼容性好，但代码不简洁、功能不完善，已停止维护。
        3.x 目前流行、稳定（2019年），放弃了IE6/7，对IE8支持不太好，更偏向于响应式布局、移动端的项目开发。
        4.x、5.x 最新版。

    使用步骤：
    控制权在框架自身，故此，开发者需要按照用法规定才能去正确使用
        --------------------1）创建文件夹结构
        项目名/
            --------------
            bootstrap/
                bs.js
                bs.css
                fonts/
            注意：
                要么直接复制整个【bs文件夹】，
                要么bs文件夹里面的文件【一个个】复制，
                然后直接link导入bs.js文件就行。
            --------------                
            css/
            images/
            index.html

        --------------------2）创建html骨架
        参考：官网--》入门--》基本模板
            meta标签：三个
            IE兼容问题，script标签两个：css3和html5、媒体查询

        --------------------3）引入样式
        link
            bootstrap.css  // 仅使用bs样式，引入它即可
            normalize.css  // 统一渲染样式。不需要引入了，因为bootstrap内部已经引入了。
        script
            jquery.js      // 需要bs的【js插件】，那就再引入它，因为bs的js插件依赖jq，注意在bs之前引入
            bootstrap.js   // 需要bs的js交互，那再引入它

        --------------------4）编写内容
        直接复制官网案例来用，并了解如下内容就能更好使用
            - class类名、html结构：代表的样式效果
            - 注意权重问题
        自定义样式时，添加新类名即可，但权重一定要注意

        --------------------
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 三个meta必写，且在最前面 -->
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- IE兼容，2个script标签 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
            <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->

        <!-- jq和bs -->
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
        <script src="./js/jquery.js"></script>
        <script src="./bootstrap/js/bootstrap.min.js"></script>

        <style>
            /* 自定义样式 */
            .mylogin {
                width: 200px;
            }
        </style>

        <title>bootstrap初体验</title>
    </head>
    <body>
        <!-- 使用：从官网复制过来即可 -->
        <button type="button" class="btn btn-danger mylogin">
            （危险）Danger
        </button>
    </body>
</html>
